<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 面板</title>
    <meta charset="utf-8">
    <!-- 适应移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>

<body>
    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="panel panel-default">
            <div class="panel-body">
                这是一个基本的面板
            </div>
        </div>
    </div>

    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="panel panel-default">
            <div class="panel-heading">
                不带 title 的面板标题
            </div>
            <div class="panel-body">
                面板内容
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    带有 title 的面板标题
                </h3>
            </div>
            <div class="panel-body">
                面板内容
            </div>
        </div>
    </div>

    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="panel-heading">
            <h3 class="panel-title">
                带有 title 的面板标题
            </h3>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
                这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板这是一个基本的面板
            </div>
            <div class="panel-footer">面板脚注</div>
        </div>
    </div>

    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                这是一个基本的面板
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                这是一个基本的面板
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                这是一个基本的面板
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                这是一个基本的面板
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                这是一个基本的面板
            </div>
        </div>
    </div>
</body>

</html>